<template>
  <div class="gold">
    <div class="plum">
      <p><van-icon name="arrow-left" @click="mnn"/></p>
      <p>直播</p>
      <p></p>
    </div>
    <div class="key">
        直播回放
    </div>
    <!-- <div class="uu" v-for="(item,index) in list" :key="index">
        <img :src="item.live_cover" alt="">
    </div> -->
    <div class="black">
      <video src="../../assets/shi.mp4" controls="controls" class="xsx"></video>
      <p>YY-全民娱乐的互动直播平台</p>
    </div>
    <div class="black">
      <video src="../../assets/shi.mp4" controls="controls" class="xsx"></video>
      <p>YY-全民娱乐的互动直播平台</p>
    </div>
    <div class="ff">
        <van-icon name="video-o" @click="add"/>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return {
      list: [],
    };
  },
    methods:{
        add(){
            this.$router.push('/zhibo')
        },
        mnn(){
          this.$router.go(-1)
        }
    },
    created(){
    axios.get("/getLive").then((res)=>{
      console.log(res.data.list)
      this.list=res.data.list;
    })
  },
};
</script>

<style>
.key{
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 30px;
    font-size: 20px;
    font-weight: bold;
}
.ff{
    width: 60px;
    height: 60px;
    background: turquoise;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    margin-left: 270px;
    text-align: center;
    line-height: 60px;
}
.plum {
  height: 50px;
  background: blue;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plum p{
  padding: 0 20px;
  color: white;
}
.black p{
    padding-top: 15px;
    font-weight: bold;
    font-size: 15px;
    padding-left: 18px;
}
.xsx{
  width: 90%;
  height: 200px;
  margin-left: 18px;
}
</style>
